<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <title>曝光</title>
    <link rel="stylesheet" href="/plugin/bootstrap-3.3.7/css/bootstrap.css">
    <link rel="stylesheet" href="/plugin/select2-4.0.4/css/select2.css">
    <link rel="stylesheet" href="/plugin/bootstrap-fileinput-4.4.5/css/fileinput.css">
    <link rel="stylesheet" href="/plugin/AdminLTE-2.4-rc/css/AdminLTE.css">
    <script src="/plugin/jquery-3.2.1/jquery.js"></script>
    <script src="/plugin/bootstrap-3.3.7/js/bootstrap.js"></script>
    <script src="/plugin/bootstrap-fileinput-4.4.5/js/fileinput.js"></script>
    <script src="/plugin/bootstrap-fileinput-4.4.5/js/locales/zh.js"></script>
    <script src="/plugin/select2-4.0.4/js/select2.js"></script>
</head>
<body class="container">

<div style="margin: 20px auto">
    <img width="270" height="130" src="/img/qzhj/logo.png" class="center-block">
</div>

<div class="panel panel-default">
    <div class="panel-heading">商品曝光</div>
    <div class="panel-body">
        <form id="prodInfo" class="form-horizontal" method="post" enctype="multipart/form-data" action="/qzhj/prod/add">
            <input type="hidden" name="token" value="${token}">
            <div class="form-group">
                <label for="prodName" class="col-sm-2 control-label">曝光商品名称</label>
                <div class="col-sm-6">
                    <input type="text" class="form-control" id="prodName" name="prodName" maxLength="10" minlength="2" placeholder="商品名称没名称怎么行？" required>
                </div>
                <div class="hidden-sm hidden-md" style="height: 5px"></div>
                <div class="col-sm-4">
                    <select name="typeId" title="" class="form-control select2" style="width: 100%;" required>
                        <#list typeKeys as typeKey>
                            <optgroup label="${typeKey.name}">
                                <#list typeValues[typeKey.id?string] as typeValue>
                                    <option value="${typeValue.id}">${typeValue.name}</option>
                                </#list>
                            </optgroup>
                        </#list>
                    </select>
                </div>
            </div>

            <hr>

            <div class="form-group">
                <label for="detailed" class="col-sm-2 control-label">描述</label>
                <div class="col-sm-10">
                    <textarea rows="3" class="form-control" id="detailed" name="detailed" placeholder="请描述该商品情况" style="resize: vertical;min-height: 34px" minlength="5" maxLength="200" required></textarea>
                </div>
            </div>

            <hr>

            <div class="form-group">
                <label for="areaId" class="col-sm-2 control-label">曝光商品所在地区</label>
                <div class="col-sm-3">
                    <select title="" id="provinceSelect" name="cityId" class="form-control select2" style="width: 100%;">
                    </select>
                </div>
                <div class="hidden-sm hidden-md" style="height: 5px"></div>
                <div class="col-sm-3" style="display: none">
                    <select title="" id="citySelect" name="provinceId" class="form-control select2" style="width: 100%;">
                    </select>
                </div>
                <div class="hidden-sm hidden-md" style="height: 5px"></div>
                <div class="col-sm-3" style="display: none">
                    <select title="" id="areaSelect" name="areaId" class="form-control select2" style="width: 100%;">
                    </select>
                </div>
            </div>

            <hr>

            <div class="form-group">
                <label for="areaId" class="col-sm-2 control-label">商品链接</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" name="url" minlength="2" placeholder="可不填">
                </div>
            </div>


            <hr>

            <div class="form-group">
                <label for="email" class="col-sm-2 control-label">曝光人信息</label>
                <div class="col-sm-3">
                    <input type="email" class="form-control" id="email" name="email" placeholder="邮箱，可不填">
                </div>
                <div class="hidden-sm hidden-md" style="height: 5px"></div>
                <div class="col-sm-3">
                    <input type="number" class="form-control" id="phone" name="phone" placeholder="手机号，可不填">
                </div>
                <div class="hidden-sm hidden-md" style="height: 5px"></div>
                <div class="col-sm-3">
                    <input type="text" class="form-control" id="name" name="name" placeholder="昵称，随便填个就好" required>
                </div>
            </div>

            <hr>

            <div class="form-group">
                <label for="detailed" class="col-sm-2 control-label">图片</label>
                <div class="col-sm-10">
                    <input id="imagesInput" type="file" name="images" multiple/>
                </div>
            </div>

            <hr>

            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                    <button type="submit" class="btn btn-primary" onclick="addProd()">曝光</button>
                    <button type="button" class="btn btn-primary" onclick="location.href='/'">返回</button>
                ${err!}
                </div>
            </div>


        </form>
    </div>
</div>


<script>

    $('.select2').select2({
        minimumResultsForSearch: Infinity,
        placeholder:'请选择'
    });

    let $imagesInput = $('#imagesInput');
    $imagesInput.fileinput({
        showUpload : false,
        language : 'zh',
        maxFileCount: 10,
        allowedPreviewTypes : [ 'image' ],
        allowedFileExtensions : [ 'jpg', 'png', 'gif' ],
        maxFileSize : 2000,
        previewFileType: 'any'
    });


    function addProd() {
        $.post("/qzhj/prod/add", gerFromData("#prodInfo"), function (d) {
            console.log(d);
        },"json");
    }

    /**
     * 获取表单数据
     * @param selector
     * @returns {{}}
     */
    function gerFromData(selector) {
        var data = $(selector).serializeArray();
        var result = {};
        for (var i = 0; i < data.length; ++i) {
            if (data[i].value)
                result[data[i].name] = data[i].value;
        }
        return result;
    }


    // 初始化省份选择
    $.get("/system/area/getProvince", null, function (d) {
        d = toSelectt2Data(d, "daId", "daName");
        if (!d || d.length === 0)
            return;

        let $provinceSelect = $("#provinceSelect");
        let $citySelect = $("#citySelect");
        let $areaSelect = $("#areaSelect");
        $provinceSelect.select2({
            placeholder:'请选择',
            data: d
        });
        $provinceSelect.val(null).trigger("change");
        $provinceSelect.change(function () {
            let id = $provinceSelect.val();
            if (!id)
                return;
            $areaSelect.parent().hide();
            $areaSelect.empty();

            $.get("/system/area/getByParent", {parentId: id}, function (d) {
                if (!d || d.length === 0) {
                    $citySelect.parent().hide();
                    return;
                }
                d = toSelectt2Data(d, "daId", "daName");
                if (!d)
                    return;
                $citySelect.empty();
                $citySelect.select2({
                    placeholder:'请选择',
                    data: d
                });
                $citySelect.parent().show();
                $citySelect.val(null).trigger("change");
            });
        });
        $citySelect.change(function () {
            let id = $citySelect.val();
            if (!id)
                return;

            $.get("/system/area/getByParent", {parentId: id}, function (d) {
                if (!d || d.length === 0) {
                    $areaSelect.parent().hide();
                    return;
                }
                d = toSelectt2Data(d, "daId", "daName");
                if (!d || d.length === 0)
                    return;
                $areaSelect.empty();
                $areaSelect.select2({
                    placeholder:'请选择',
                    data: d
                });
                $areaSelect.parent().show();
            });
        });



    },"json");

    /**
     * 转为select2需要的id  text数据
     * @param id
     * @param text
     * @param data
     */
    function toSelectt2Data(data, id, text) {
        if (!data || data.length === 0)
            return null;
        let result = [];
        for (let i = 0,temp; i < data.length; ++i) {
            temp = data[i];
            result.push({id:temp[id],text:temp[text]})
        }
        return result;
    }

</script>


</body>
</html>